import React, {Component} from 'react';
import {Alert, AsyncStorage, Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import Toast from '@remobile/react-native-toast';
import {NavigationActions} from 'react-navigation';
import CountEmitter from './../../utils/event/CountEmitter';
import {BasicStyle} from "../../../style/BasicStyle";
import FetchUtils from './../../utils/FetchUtils';
import utils from './../../utils/utils';
import Spinner from "react-native-loading-spinner-overlay";


export default class My extends Component {

    static navigationOptions = ({navigation, screenProps}) => ({
        tabBarLabel: '我的',
        tabBarIcon: ({tintColor, focused}) => (
            focused ?
                <Image style={{
                    height: utils.autoWidth(23),
                    width: utils.autoWidth(27)
                }} resizeMode='contain' source={require('./../../../img/my_select3x.png')}/>
                :
                <Image style={{
                    height: utils.autoWidth(23),
                    width: utils.autoWidth(27)
                }} resizeMode='contain' source={require('./../../../img/my_no3x.png')}/>
        ),
        title: "这样搭",
        headerStyle: {
            backgroundColor: '#F6F6F6',
        },
        headerTitleStyle: {
            alignSelf: 'center',
            fontSize: utils.setSpText(17),
        },
        headerLeft: <TouchableOpacity onPress={() => {
            let {navigate} = navigation;
            navigate('MyDedailNav');
        }}><Image style={{height: 25, width: 25, marginLeft: 15,}} resizeMode='contain'
                  source={require('./../../../img/settings3x.png')}/></TouchableOpacity>,
        headerRight: <TouchableOpacity
            onPress={() => navigation.state.params ? navigation.state.params.toChatList() : null}><Image
            style={{height: 18, width: 27, marginRight: 10,}} resizeMode='contain'
            source={require('./../../../img/to_chat3x.png')}/></TouchableOpacity>,
    });

    constructor(props) {
        super(props);
        this.state = {
            username: '',
            headerImg: '',
            role: null,
            userListView: [],
            isShowUserListBut: true,
            loadingStatus: false,
        };
    }

    componentWillMount() {
        CountEmitter.addListener('myRefresh', () => {
            console.log("刷新数据");
            this._getData();
        });
    }

    componentDidMount() {
        this._getData();
        this.props.navigation.setParams({
            loginOut: this.loginOut,
            toChatList: this._toChatList,
        })
    }

    componentWillUnmount() {
        CountEmitter.removeListener('myRefresh', () => {
        });
    }

    /*退出登录的方法*/
    loginOut = () => {
        AsyncStorage.multiRemove(["HXToken", "XToken", "role", "username", "userId", "avatar"]);

        const resetAction = NavigationActions.reset({
            index: 0,
            actions: [
                NavigationActions.navigate({routeName: 'RegisterLoginNav'})
            ]
        });
        this.props.navigation.dispatch(resetAction);
    };
    /*前往详情页*/
    toProfileView = (id, role) => {
        let {navigate} = this.props.navigation;
        navigate('StyleManProfileNav', {userId: id, role: role})
    };
    /*跳转聊天*/
    _toChatList = () => {
        let {navigate} = this.props.navigation;
        navigate('MyChatListNav');
    };

    render() {
        let {navigate} = this.props.navigation;

        return (
            <View style={styles.pageView}>
                <Spinner visible={this.state.loadingStatus} textContent={""} textStyle={{color: '#FFF'}}/>
                <Image style={styles.imgBackground} source={require('./../../../img/mybackground.png')}>
                    <View style={styles.contentView}>
                        <View style={styles.myImgView}>
                            <Image style={styles.myImg}
                                   source={{uri: utils.qiniuUrl + this.state.headerImg + utils.qiniu200Url}}/>
                            <Text style={styles.nickName}>{this.state.username}</Text>
                        </View>

                        <View style={styles.myForm}>
                            <View style={styles.myExperiencerView}>
                                <View style={styles.myExperiencerTitleView}>
                                    <Image style={styles.myExperiencerTitleImg}
                                           source={require('./../../../img/loveheart3x.png')}/>
                                    <Text style={styles.myExperiencerTitleText}>
                                        {this.state.role === 1 ? '我的搭配师' : null}
                                        {this.state.role === 2 ? '我的体验官' : null}
                                    </Text>
                                </View>
                                <TouchableOpacity
                                    style={styles.myExperiencerRightView}
                                    onPress={() => {
                                        if (this.state.isShowUserListBut) {
                                            navigate('MyUserListNav');
                                        } else {
                                            if(this.state.role === 1){
                                                Toast.showShortBottom("老铁~找几个搭配师呗！")
                                            }else if(this.state.role === 2){
                                                Toast.showShortBottom("老铁~找几个体验官呗！")
                                            }
                                        }
                                    }}
                                >
                                    <View>
                                        <Text style={styles.myExperiencerRightText}>查看所有</Text>
                                    </View>
                                    <Image style={styles.rightPointImg}
                                           source={require('./../../../img/rightpoint.png')}/>
                                </TouchableOpacity>

                            </View>

                            <View style={styles.rightLineView}/>

                            <View style={styles.myExperiencerHeaderImgView}>
                                {this.state.userListView}
                            </View>

                            <TouchableOpacity style={styles.myShopView} onPress={() => {
                                navigate('MyOrderListNav');
                            }}>
                                <View style={styles.myShopTitleView}>
                                    <Image style={styles.myShopTitleImg}
                                           source={require('./../../../img/order.png')}/>
                                    <Text style={styles.myShopTitleText}>我的订单</Text></View>
                                <View style={styles.myShopRightView}>
                                    <Image style={styles.rightPointImg}
                                           source={require('./../../../img/rightpoint.png')}/>
                                </View>
                            </TouchableOpacity>

                        </View>
                    </View>
                </Image>
            </View>
        );
    }

    /*获取数据*/
    _getData = () => {
        AsyncStorage.getItem("XToken").then((xToken) => {
            FetchUtils.getWithHeader(utils.apiUrl + '/user/userInfo', xToken, '', (res) => {
                if (res.code == 200) {
                    // console.log(res);
                    let userListView = [];
                    if (res.apiData.userList.content) {
                        for (let n = 0; n < res.apiData.userList.content.length; n++) {
                            userListView.push(
                                <TouchableOpacity key={n} style={styles.myExperiencerHeaderImgViewItem}
                                                  onPress={this.toProfileView.bind(this, res.apiData.userList.content[n].id, res.apiData.userList.content[n].role)}>
                                    <Image style={styles.myExperiencerHeaderImg}
                                           source={{uri: utils.qiniuUrl + res.apiData.userList.content[n].headerImg + utils.qiniu200Url}}/>
                                    <Text
                                        style={styles.myExperiencerHeaderImgText}>{res.apiData.userList.content[n].username}</Text>
                                </TouchableOpacity>
                            )
                        }
                    } else {
                        this.setState({
                            isShowUserListBut: false,
                        });
                        userListView.push(
                            <View key={0} style={styles.myExperiencerHeaderImgViewItem}>
                                <Image style={styles.myExperiencerHeaderImg}/>
                                <Text
                                    style={styles.myExperiencerHeaderImgText}>无数据</Text>
                            </View>
                        )
                    }
                    this.setState({
                        username: res.apiData.user.username,
                        headerImg: res.apiData.user.headerImg,
                        role: res.apiData.user.role,
                        userListView: userListView,
                    });
                }

            });
        });

    }
};
const styles = StyleSheet.create({
    pageView: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'flex-start',
        backgroundColor: '#FFFFFF',
    },
    contentView: {
        alignItems: 'center',
    },
    imgBackground: {
        flex: 1,
        width: utils.screenWidth,
    },
    myImgView: {
        alignItems: 'center',
        marginTop: utils.autoheight(120),
    },
    myImg: {
        height: utils.autoWidth(90),
        width: utils.autoWidth(90),
        borderRadius: utils.autoWidth(45),
    },
    nickName: {
        fontSize: utils.setSpText(17),
        color: '#010101',
        marginBottom: utils.autoheight(10),
    },
    myForm: {
        borderWidth: utils.autoWidth(0.5),
        borderColor: '#A0A0A0',
        width: utils.autoWidth(320),
    },
    rightLineView: {
        width: utils.autoWidth(300),
        height: utils.autoheight(0.5),
        backgroundColor: '#A0A0A0',
        alignSelf: 'flex-end',
    },
    myExperiencerView: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    myExperiencerTitleImg: {
        width: utils.autoWidth(17),
        height: utils.autoWidth(16),
        marginRight: utils.autoWidth(8),
    },
    myExperiencerTitleText: {
        fontSize: utils.setSpText(17),
        color: '#010101',
        marginTop: -utils.autoheight(6),
    },
    myExperiencerTitleView: {
        flexDirection: 'row',
        marginTop: utils.autoheight(21),
        marginBottom: utils.autoheight(14.3),
        marginLeft: utils.autoWidth(18),
    },
    myExperiencerRightView: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderBottomWidth: 0,
    },
    myExperiencerRightText: {
        fontSize: utils.setSpText(15),
        color: '#A0A0A0',
        alignItems: 'center',
    },
    rightPointImg: {
        width: utils.autoWidth(8),
        height: utils.autoheight(13),
        marginRight: utils.autoWidth(12),
        marginLeft: utils.autoWidth(6),
    },
    myExperiencerHeaderImgView: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        borderBottomWidth: utils.autoWidth(0.5),
        borderColor: '#A0A0A0',
        marginTop: utils.autoheight(22),
        paddingBottom: utils.autoheight(14),
    },
    myExperiencerHeaderImgViewItem: {
        alignItems: 'center',
    },
    myExperiencerHeaderImg: {
        width: utils.autoWidth(55),
        height: utils.autoWidth(55),
        borderRadius: utils.autoWidth(27.5),

    },
    myExperiencerHeaderImgText: {
        fontSize: utils.setSpText(15),
        color: '#000000',
    },
    myShopView: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        height: utils.autoheight(80),
    },
    myShopTitleView: {
        flexDirection: 'row',
        marginTop: utils.autoheight(27.5),
        marginLeft: utils.autoWidth(14),
    },
    myShopTitleImg: {
        width: utils.autoWidth(25),
        height: utils.autoWidth(25),
        marginRight: utils.autoWidth(6),
    },
    myShopTitleText: {
        fontSize: utils.setSpText(17),
        color: '#010101',
        marginTop: -utils.autoheight(3),
    },
    myShopRightView: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        marginTop: utils.autoheight(33),
    },
})